<!-- Docs styles -->
import { Story, Canvas, Preview, ArgsTable   } from '@storybook/addon-docs';
import image1 from '../../stories/assets/structured-list/01_ListaEstrcuturada_Normal.png';
import image2 from '../../stories/assets/structured-list/02_ListaEstrcuturada_SeleccionFila.png';
import image3 from '../../stories/assets/structured-list/03_ListaEstrcuturada_Anatomia.png';
import image4 from '../../stories/assets/structured-list/04_ListaEstrcuturada_Estados.png';
import image5 from '../../stories/assets/structured-list/tag.png';


<style>
  {`
    .sbdocs-table tr * {
      text-align: center;
      font-weight: bold;
    }

    img {
      display: block;
      margin: 0 auto;
    }

    table {
      margin: 0 auto !important;
    }
  `}
</style>

<img src={image5} width="150"/>


# Lista estructurada / Structured list

Una lista estructurada agrupa contenido complejo que es similar o está relacionado. Usos típicos de las listas estructuradas son términos y definiciones.

Las listas estructuradas tienen una función similar a las listas, aunque el contenido de estas puede ser descompuesto en diferentes bloques comunes, permitiendo así una estructuración mayor de la información. La visualización de las listas se hace con un formato similar a una tabla con filas y columnas y con una línea de encabezado que enuncia las partes de cada elemento.

<img src={image1} width="500"/>

A pesar de la complejidad permitida dentro de la lista estructurada, no se recomienda tener varios párrafos en un mismo elemento de la lista estructurada o el anidamiento de elementos dentro de la lista. Para estos listados más complejos, se recomienda la utilización de las tablas de datos.

Asimismo, si una lista estructurada tiene muchos elementos, se recomienda la utilización de una tabla de datos paginada en su lugar.

Las listas estructuradas tienen una propiedad de interacción que no siempre se aplica, la **selección** de fila, que permite seleccionar uno de los elementos de la misma. Esta interacción es sencilla y se limita a un único elemento. Para interacciones más complejas se recomienda usar otros componentes como las tablas de datos.

<img src={image2} width="500"/>

### Anatomía

La anatomía de la lista estructurada se basa en un contenedor flexible de filas y columnas que se ajusta al tamaño del contenido.

Las columnas se definen con un ancho determinado, variable para distintos usos, en función del contenido, y las filas se adaptarán dinámicamente a este, permitiendo múltiples líneas de texto, con lo que las filas pueden no tener la misma altura.

El texto de la lista estructurada se mantiene en el estándar del cuerpo que es Lato de 16px, regular para los elementos y en negrita para el encabezado de la lista.

Se deben mantener relaciones de espaciado en cada una de las filas de una unidad de 8px al elemento superior y dos unidades o 16px al elemento inferior.


<img src={image3} width="500"/>

### Comportamiento

Las listas estructuradas no seleccionables no presentan ninguna particularidad de comportamiento. Las seleccionables sí tienen un comportamiento específico que refleja la interacción del usuario.

Cuando un usuario selecciona un elemento de la lista, clicando en cualquier parte de la fila correspondiente, se marca la fila correspondiente mediante un icono representativo.

Para cada uno de los elementos representados como filas de la lista estructurada los estados son así pues enabled, hover, focus, selected, skeleton.

<img src={image4} width="500"/>


### Código

```
<structured list></structured list>
```

### Tokens

**Color**

| Class                                  | Property      | Color token |
| :------------------------------------- | :------------ | :---------- |
| `.bx--structured-list-th`              | text color    | `$text-01`  |
| `.bx--structured-list-td`              | text color    | `$text-02`  |
| `.bx--structured-list-row--header-row` | border-bottom | `$ui-03`    |
| `.bx--structured-list-row`             | border-bottom | `$ui-03`    |

| Class                                | Property         | Color token    |
| :----------------------------------- | :--------------- | :------------- |
| `.bx--structured-list-row--selected` | background-color | `$selected-ui` |
| `.bx--structured-list-svg:checked`   | fill             | `$ui-05`       |
| `.bx--structured-list-row:hover`     | background-color | `$hover-row`   |
| `.bx--structured-list-svg:hover`     | fill             | `$ui-04`       |
| `.bx--structured-list-row:focus`     | border           | `$focus`       |

**Tipografía**

| Property                  | Type token      |
| :------------------------ | :-------------- |
| `.bx--structured-list-th` | `$heading-01`   |
| `.bx--structured-list`    | `$body-long-01` |

**Estructura**

| Property                   | Property                    | Spacing token |
| :------------------------- | :-------------------------- | :------------ |
| `.bx--structured-list`     | min-width                   | –             |
| `.bx--structured-list`     | min-width                   | –             |
| `.bx--structured-list-th`  | padding-top                 | `$spacing-05` |
| `.bx--structured-list-th`  | padding-bottom              | `$spacing-03` |
| `.bx--structured-list-th`  | padding-left, padding-right | `$spacing-05` |
| `.bx--structured-list-td`  | padding-top                 | `$spacing-05` |
| `.bx--structured-list-td`  | padding-bottom              | `$spacing-06` |
| `.bx--structured-list-td`  | padding-left, padding-right | `$spacing-05` |
| `.bx--structured-list-svg` | height, width               | –             |